<template>
	<view class="container-layout">
		<view class="topview">
			<view class="top-row">
				<view class="top-left">
					<view class="sim—img">
						<image src="../../static/device/device_icon.png" mode="aspectFill"></image>
					</view>
					<view class="sim-text">
						{{$t('subscribed.deviceRecharge')}}
					</view>
				</view>
				<!-- <view class="top-right">
					<image src="../../static/pay/sim-more.png" mode=""></image>
				</view> -->
				
			</view>
			<view class="middle-iccid">
				imei:{{props.message}}
			</view>
	<!-- 		<view class="bottom-row">
				<view class="my-order">
					我的订单
				</view>
				<view class="recharge">
					充值
				</view>
			</view> -->
		</view>
		<scroll-view scroll-y style="height: 100%" @scrolltolower="getData">
			<view class="content">
				<view class="subscribed-item" v-for="item in dataList" :key="item.id">
					<view class="item goodsName">
						{{item.goodsName}}
					</view>
					<view class="item orderMoney">
						{{$t('subscribed.price')}} {{item.currency}}{{item.orderMoney}}
					</view>
					<view class="item createTime">
						{{$t('subscribed.buyDate')}} {{formatAppUTCTime(item.createTime)}}
					</view>
					<view class="item orderId">
						{{$t('subscribed.orderNumber')}} {{item.orderId}}
					</view>

				</view>
			</view>
		</scroll-view>
<!-- 		<view class="tabs">
			<v-tabs v-model="current" :tabs='tablist' :scroll="false" :line-scale="0.2" b bg-color="f3f3f3"
				@change="changeTab" active-color="#53786C" lineColor="#53786C" line-height="2px" />
		</view> -->
		
		<!-- <view class="container-tabs-list">
			<swiper class="container-tabs__swiper" :current="current" @animationfinish="animationFinished">
				<swiper-item class="swiper-item" style="height: 100%;">
					<scroll-view scroll-y style="height: 100%" @scrolltolower="getData">
						<view class="content">
							<view class="subscribed-item" v-for="(item,index) in 10 ">
								<view class="buy-date">
									订购日期:
								</view>
								<view class="use-date">
									启用日期:2024/12/13
								</view>
								<view class="valid-date">
									有效日期:2025/02/03
								</view>
								
							</view>
						</view>
					
					</scroll-view>
				</swiper-item>
		
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%" @scrolltolower="getData">
					<view class="content">
						<view class="subscribed-item" v-for="(item,index) in 10 ">
							<view class="buy-date">
								订购日期:
							</view>
							<view class="use-date">
								启用日期:2024/12/13
							</view>
							<view class="valid-date">
								有效日期:2025/02/03
							</view>
							
						</view>
					</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%" @scrolltolower="getData">
						<view class="content">
							<view class="subscribed-item" v-for="(item,index) in 10 ">
								<view class="buy-date">
									订购日期:
								</view>
								<view class="use-date">
									启用日期:2024/12/13
								</view>
								<view class="valid-date">
									有效日期:2025/02/03
								</view>
								
							</view>
						</view>
					</scroll-view>
				</swiper-item>
		
			</swiper>
		</view> -->
		
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import {onLoad,onShow} from "@dcloudio/uni-app";
	import { apiUserGetDeviceOrderList } from '../../api/user_api';
	import { formatAppUTCTime } from '../../utils/time';
	const tablist = ref(['使用中','未启用','已到期'])
	const current = ref(0)
	const dataList = ref(null)
	const changeTab = (e) => {
		current.value = e;
	}
	const animationFinished = (e) => {
		current.value = e.detail.current
	}
	const props = defineProps({
	  message: String
	});
	onLoad(async()=>{
		
	})
	
	onShow(async ()=>{
		let res = await apiUserGetDeviceOrderList({imei:props.message});
		dataList.value = res.content;
		if(dataList.value){
			uni.setStorageSync(props.message,true);
		}
	})
	
</script>

<style lang="scss" scoped>
	.container-layout{
		.topview{
			margin: 20rpx 30rpx;
			background-color: #fff;
			border-radius: 10rpx;
			// box-shadow: 0 0 40rpx rgba(43, 69, 136, 0.3);
			padding: 20rpx 20rpx;
			
			.top-row{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.top-left{
					display: flex;
					align-items: center;
					.sim—img{
						width: 70rpx;
						height: 70rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.sim-text{
						margin-left: 20rpx;
						font-size: 30rpx;
						color: #333;
					}
				}
				.top-right{
					width: 50rpx;
					height: 50rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				
			}
			.middle-iccid{
				margin-top: 10rpx;
				font-size: 36rpx;
				color: #333;
			}
			.bottom-row{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10rpx;
				.my-order{
					font-size: 32rpx;
					color: #0D3846;
				}
				.recharge{
					height: 60rpx;
					width: 100rpx;
					border-radius: 30rpx;
					justify-content: center;
					display: flex;
					align-items: center;
					color: #fff;
					font-size: 26rpx;
					background-color: #0D3846;
				}
			}
		}
		.content{
			padding-bottom: 100rpx;
			.subscribed-item{
				margin: 20rpx 30rpx;
				padding: 40rpx 40rpx;
				background-color: #fff;
				border-radius: 10rpx;
				
				.item{
					color: #333;
					margin-top: 10rpx;
					font-size: 30rpx;
				}
				// .use-date{
				// 	margin-top: 20rpx;
				// 	color: #666;
				// 	font-size: 30rpx;
				// }
				// .valid-date{
				// 	margin-top: 20rpx;
				// 	color: #666;
				// 	font-size: 30rpx;
				// 	}
				}
		}
		// .tabs{
		// 	background-color: transparent;
			
		// }
		// .container-tabs-list {
		// 	height: calc(100vh - 300rpx);
		// 	.container-tabs__swiper {
		// 		height: 100%;
		// 		.content{
		// 			padding-bottom: 100rpx;
		// 			.subscribed-item{
		// 				margin: 20rpx 30rpx;
		// 				padding: 40rpx 40rpx;
		// 				background-color: #fff;
		// 				border-radius: 10rpx;
		// 				box-shadow: 0 0 40rpx rgba(43, 69, 136, 0.3);
						
		// 				.buy-date{
		// 					color: #666;
		// 					font-size: 30rpx;
		// 				}
		// 				.use-date{
		// 					margin-top: 20rpx;
		// 					color: #666;
		// 					font-size: 30rpx;
		// 				}
		// 				.valid-date{
		// 					margin-top: 20rpx;
		// 					color: #666;
		// 					font-size: 30rpx;
		// 					}
		// 				}
		// 		}
				
		// 		}
		// 	}
			
		}

</style>